<template>
  <div>
    <dc-row class="title-Info">
      <dc-col class="title-left-button" span = '3'>
        <div @click = 'goback'>
          <span class=" iconfont icon-left"></span>
        </div>
      </dc-col>
      <dc-col span = '17' style="position: relative">
        <input v-focus v-model="currentValue" class="title-Middle-input" :placeholder="placeholder" />
        <div class="title-Middle-input-bg-left"><i class="iconfont icon-btn-search"></i></div>
        <div class="title-Middle-input-bg-right" @click = 'clearCurrentValue'><i class="iconfont icon-form-delete"></i></div>
      </dc-col>
      <dc-col class="title-right-button" span = '4'>
        {{btnvalue}}
      </dc-col>
    </dc-row>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  /**
   * shopAlter
   * @namespace components/shop/shopAlter
   * @description 点击跳回以后从vuex的store里面取的相关信息，
   */
  export default {
    data () {
      return {
        currentValue: ''
      };
    },
    props: {
      placeholder: {
        dafault () {
          return '搜索';
        }
      },
      btnvalue: {
        dafault: '搜索'
      }
    },
    methods: {
      goback () {
        console.log(1);
        this.$router.go(-1);
      },
      clearCurrentValue () {
        this.currentValue = '';
      }
    },
    directives: {
      focus: {
        inserted (el, binding) {
          el.focus();
        }
      }
    },
    watch: {
      currentValue (val) {
        // console.log('currentValue变化', val);
        this.$emit('input', val);
      }
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .title-Info {
    line-height: px2rem(90px);
    height: px2rem(85px);
    overflow: hidden;
    background: #fafafa;
  }
  .title-left-button {
    text-align: center;
    span {
      font-size: px2rem(38px);
    }
  }
  .title-Middle-input {
    /*margin-top: px2rem(12px);*/
    width: 100%;
    height: px2rem(58px);
    /*line-height: px2rem(60px);*/
    background-color: #ececec;
    border: none;
    border-radius: px2rem(10px);
    padding: 0;
    padding-left: 30px;
    box-sizing: border-box;
    outline: none;
  }
  .title-Middle-input-bg-left {
    line-height: px2rem(92px);
    position: absolute;
    top: 0;
    left: 8px;
    color: #666;
  }
  .title-Middle-input-bg-right {
    line-height: px2rem(92px);
    position: absolute;
    top: 0;
    right: 8px;
    color: #666;
    i {
      font-size: px2rem(38px);
    }
  }
  .title-right-button {
    font-size: px2rem(30px);
    text-align: center;
    color: $theme-color;
  }
  .active {
    background: #fff;
    color: $theme-color;
    &:before {
      background-color: #fff;
    }
  }
  .list-right-btn {
    border: none;
    background-color: $theme-color;
    color: #fff;
    border-radius: px2rem(8px);
    padding: px2rem(8px) px2rem(14px);
  }
  .search-box {
    width: 100%;
    box-sizing: border-box;
    height: px2rem(100px);
    padding: px2rem(15px) px2rem(24px);
    color: #999;
    font-size: px2rem(28px);
    background: #f2f2f2;
    .search-content {
      border-radius: 4px;
      text-align: center;
      line-height: px2rem(64px);
    }
  }
</style>


